<template>
    <div class="login">

        <div class="loginBox">
            <div class="main">
                <h5>医院信息集成平台</h5>
                <h6>Remote Consultation Platform</h6>
                <div v-if="!isLoginOk">

                        <p class="p1">

                                <input type="text" v-model="ruleForm.user" autocomplete="off"></input>

                        </p>
                        <p class="p2">
                                <input type="password" v-model="ruleForm.pass" autocomplete="off"></input>
                        </p>
                        <p class="p3">
                            <button class="btn" @click="login2Http">确定</button>
<!--                            <button class="btn" @click="login2Http2HIS">确定</button>-->
                            <button class="btn" @click="resetForm('ruleForm')">退出</button>
                        </p>

                </div>
                <div v-if="isLoginOk">

                        <p class="p11" style="align-items: center">

                         <span style="margin-left: 12px;font-size: 16px;height: 42px!important;"> {{LoginInfor.HospitalName}}</span>
                        </p>
                        <p class="p2">

                            <select class="form-control" style="width: 100%" v-model="selectKS"  @change="selectKSChange()" >
                                <option
                                        v-for="(item,index) in ksList"
                                        :label="item.name"
                                        :value="item.id"
                                        :key="index"
                                ></option>
                            </select>
                        </p>
                        <p class="p3">
                            <button class="btn" @click="skip2Home()">进入系统</button>
                            <button class="btn" @click="isLoginOk=false">上一步</button>
                        </p>

                </div>
            </div>
        </div>


    </div>
</template>
<script>
    export default {
        name: "Login",
        data() {
            return {
                isLoginOk: false,
                ruleForm: {
                    pass: '',
                    user: ''
                },
                rules: {
                    user: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 1, max: 55, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    pass: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 1, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],

                },
                ksList:[],
                selectKS:{},
                LoginInfor:{},
            };
        },
        methods: {
            // submitForm(formName) {
            //     this.$refs[formName].validate((valid) => {
            //         if (valid) {
            //             console.log("执行登录")
            //             console.log(formName);
            //              this.login2Http();
            //         } else {
            //             console.log('error submit!!');
            //             return false;
            //         }
            //     });
            // },
            resetForm(formName) {

            },
            login2Http() {
                var data = {
                    HospitalId:"0",//2
                    UserNo: this.ruleForm.user,
                    Pass: this.ruleForm.pass,
                };
                console.log("登录");
                console.log(data);
                this.$post("UserManage/Login", data)
                    .then(res => {
                        console.log("登录信息返回结果");
                        console.log(res);
                        if (res.code == 0) {
                            console.log(res.data);
                            this.LoginInfor=res.data;
                            localStorage.setItem('LoginInfor', JSON.stringify(this.LoginInfor));
                            localStorage.setItem('user_id', res.data.UserId);
                            localStorage.setItem('user_name', res.data.UserName);
                            localStorage.setItem('dept_id', res.data.SectionId);
                            this.selectKS= res.data.SectionId;
                            this.$setToken(res.data.Token);
                            this.ksList=res.data.SectionList;
                            this.skip2Home();
                            // this.isLoginOk = true;
                        } else {
                            this.$message({message: res.msg, type: "error"});
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        this.$message({
                            message: "登录异常",
                            type: "error"
                        });
                    });
            },
            login2Http2HIS() {
                var data = {
                    UserNo: this.ruleForm.user,
                    UserPass: this.ruleForm.pass,
                };
                console.log("登录");
                console.log(data);
                this.$post("CloudHIS/Login", data)
                    .then(res => {
                        console.log("登录信息返回结果");
                        console.log(res);
                        if (res.code == 0) {
                            console.log(res.data);
                            this.LoginInfor=res.data;
                            localStorage.setItem('LoginInfor', JSON.stringify(this.LoginInfor));
                            localStorage.setItem('user_id', res.data.UserId);
                            localStorage.setItem('user_name', res.data.UserName);
                            localStorage.setItem('dept_id', res.data.SectionId);
                            this.selectKS= res.data.SectionId;
                            this.$setToken(res.data.Token);
                            this.ksList=res.data.SectionList;
                            this.skip2Home();
                            // this.isLoginOk = true;
                        } else {
                            this.$message({message: res.msg, type: "error"});
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        this.$message({
                            message: "登录异常",
                            type: "error"
                        });
                    });
            },
            selectKSChange(){
                console.log("选中科室");
                console.log(this.selectKS);
                localStorage.setItem('dept_id',this.selectKS);
            },
            skip2Home() {
                setTimeout(() => {
                    this.$router.replace({
                        path: '/',
                        // query: {patient_id: this.clAlist.pat.patient_id, visit_id: this.clAlist.pat.visit_id}
                    });
                }, 500)
            }
        },
        created() {
            var url="http://172.16.33.2:12002/v1/"
            this.$setBaseUrl(url)
        }
    }
</script>
<style lang="scss">
    .login {
        .form-control {
            height: 42px !important;
            font-size: 16px !important;
        }
        .loginBox {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: url(../../src/assets/loginBg.jpg) no-repeat center;
            background-size: 100%;
        }

        .loginBox .main {
            width: 700px;
            height: 450px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -225px 0 0 -350px;
            border-radius: 5px;
            background: -webkit-linear-gradient(rgba(117, 179, 218, 0.9), rgba(24, 113, 171, 0.8));
            background: -o-linear-gradient(rgba(117, 179, 218, 0.9), rgba(24, 113, 171, 0.8));
            background: -moz-linear-gradient(rgba(117, 179, 218, 0.9), rgba(24, 113, 171, 0.8));
            background: linear-gradient(rgba(117, 179, 218, 0.9), rgba(24, 113, 171, 0.8));
        }

        .loginBox h5 {
            color: #fff;
            font-size: 28px;
            text-align: center;
            line-height: 50px;
            padding-top: 22px;
            position: relative;
        }

        .loginBox h5:before {
            content: '';
            width: 80px;
            height: 2px;
            background: rgba(255, 255, 255, 0.65);
            position: absolute;
            left: 98px;
            top: 46px;
        }

        .loginBox h5:after {
            content: '';
            width: 80px;
            height: 2px;
            background: rgba(255, 255, 255, 0.65);
            position: absolute;
            right: 98px;
            top: 46px;
        }

        .loginBox h6 {
            color: #fff;
            font-size: 16px;
            text-align: center;
            margin-bottom: 55px;
        }

        .loginBox .p1 {
            width: 300px;
            height: 42px;
            border-radius: 3px;
            margin: 0 auto;
            background: #fff url(../../src/assets/userNum.png) no-repeat 12px center;
        }  .loginBox .p11 {
               width: 300px;
               height: 42px;
               border-radius: 3px;
               margin: 0 auto;
               background: #fff ;
           }

        .loginBox .p2 {
            width: 300px;
            height: 42px;
            border-radius: 3px;
            margin: 12px auto;
            background: #fff url(../../src/assets/password.png) no-repeat 12px center;
        }

        .loginBox .p1 input,
        .loginBox .p2 input {
            display: block;
            height: 100%;
            width: 100%;
            padding-left: 42px;
            background: none;
            border: none;
            outline: none;
        }

        .loginBox .p3 {
            width: 300px;
            margin: 0 auto;
        }

        .loginBox .p3 .btn {
            width: 300px;
            height: 40px;
            margin-top: 10px;
            font-size: 15px;
        }

        .loginBox .p3 .btn:first-child {
            background: #00c6ff;
            color: #fff;
        }

        .loginBox .p3 .btn:last-child {
            background: none;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #fff;
        }
    }
</style>
